<template>
  <div class="audit-logs">
    <div class="filter-box">
      <div class="btnBox">
        <el-button type="primary" @click="Regimen" size="mini">下载模板</el-button>
        <el-upload class="upload-demo" action="#" :show-file-list="false" :before-upload="beforeUpload">
          <el-button size="small" type="primary">导入</el-button>
        </el-upload>
        <el-button type="primary" @click="query" size="mini">查询</el-button>
      </div>
    </div>
    <div class="log-table">
      <div class="lsd-table">
        <el-table :data="tableData" border
          :header-cell-style="{ 'background-color': '#B1C8F9', 'font-size': '14px', 'color': '#000' }" height="100%"
          style="width: 100%">
          <el-table-column fixed align="center" width="55" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column :min-width="item.width" align="center" :label="item.label" :prop="item.prop"
            :fixed="item.fixed" show-overflow-tooltip v-for="(item, index) of logColums" :key="index"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { sqbdr, doPageList, downRegimen } from "@/api/SystemConfig/auditlog";
import common from "@/utils/common.js";
export default {
  data() {
    return {
      form: {},
      tableData: [],
      logColums: [
        {
          prop: "sssy",
          label: "所属流域",
          fixed: true,
          width: "120"
        },
        {
          prop: "ssdc",
          label: "电厂",
          fixed: true,
          width: "120"
        },
        {
          prop: "xxsw",
          label: "汛限水位(米)",
          fixed: true,
          width: "140"
        },
        {
          prop: "ddsw",
          label: "当前水位(米)",
          width: "100"
        },
        {
          prop: "zzsw",
          label: "正常水位(米)",
          width: "160"
        },
        {
          prop: "ssw",
          label: "死水位(米)",
          width: "100"
        },
        {
          prop: "rkll",
          label: "入库流量(m³/s)",
          width: "160"
        },
        {
          prop: "ckll",
          label: "出库流量",
          width: "120"
        },
        {
          prop: "fdll",
          label: "发电流量",
          width: "100"
        },
        {
          prop: "zzjrl",
          label: "总装机容量(万千瓦)",
          width: "240"
        }
      ]
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    Regimen() {
      downRegimen().then(res => {
        common.downloadByBlob(res, `流域水情表${new Date().getTime()}.xlsx`);
      });
    },
    beforeUpload(file) {
      const fd = new FormData();
      fd.append("file", file);
      sqbdr(fd).then((res) => {
        this.$notify({
          message: "导入成功",
          type: "success"
        });
        this.getLogList();
      }).catch(error => {
        this.$notify({
          message: "导入失败",
          type: "error"
        });
      });
      return false;
    },
    getLogList() {
      const params = {
        pageNum: 1,
        pageSize: 100
      };
      doPageList(params).then(res => {
        this.tableData = res.data;
      });
    },
    query() {
      this.getLogList();
    }
  }
};
</script>
<style lang="less" scoped>
.audit-logs {
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;

  .filter-box {
    display: flex;
    justify-content: flex-end;

    .filter-form {
      flex: 1;
    }

    .btnBox {
      display: flex;
      justify-content: space-around;
      width: 300px;
    }
  }

  .lsd-pagination {
    text-align: right;
  }

  .log-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .lsd-table {
      flex: 1;
    }
  }
}
</style>
